/*
 * Copyright 2015-2016 Imply Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../imports';

.link-view {
  .link-header-bar {
    @include pin-top($header-height);
  }

  .container {
    @include unpin-top($header-height);
  }

  .link-panel {
    @include pin-left($left-panel-width - $tile-margin-h);
    @include for-small-screens {
      padding: 0 1px 0 0;
      font-size: 0.9em;
    }

    padding: $tile-margin-v $tile-margin-h;

    .link-container {
      background: $white;
      overflow: auto;
      padding-right: 10px;
      height: 100%;

      .link-group-title {
        padding: 0 18px;
        color: #999;
        font-size: 12px;
        text-transform: uppercase;
        pointer-events: none;
        margin-top: 8px;
        height: 25px;
        line-height: 25px;
      }

      .link-item {
        @include ellipsis;
        height: 25px;
        line-height: 25px;
        padding: 0 4px 0 38px;
        cursor: pointer;
        overflow: hidden;

        &.selected {
          background: rgba($brand, 0.16);
        }

        &:hover:not(.selected) {
          background: rgba($brand, 0.12);
        }
      }

    }

  }

  .center-panel {
    @include for-small-screens {
      top: 0;
      bottom: 0;
    }

    position: absolute;
    top: $tile-margin-v;
    bottom: $tile-margin-v;
    left: $left-panel-width;
    right: $pinboard-width;

    .center-top-bar {
      @extend %module;
      @include pin-top($control-tile-height + 1px + $control-tile-height);
      border-radius: $corner;
      padding: 17px 20px;
      border-bottom: 1px solid #eee;

      .link-title {
        @include ellipsis;
        font-size: 17px;
        margin-bottom: 8px;
        padding-right: 152px;
      }

      .link-description {
        line-height: 13px;
        max-height: 26px;
        overflow: hidden;
        color: #999;
        padding-right: 152px;
      }

      .right-align {
        position: absolute;
        min-width: 150px;
        right: $padding;
        top: $control-tile-height/ 2;
        bottom: $control-tile-height/ 2;
      }
    }

    .center-main {
      @include unpin-top($control-tile-height + 1px + $control-tile-height + $small-tile-margin);

      @include for-small-screens {
        @include unpin-top($control-tile-height + 2px + $control-tile-height);
      }

      .visualization {
        @extend %module;
        @include pin-full;
        border-radius: $corner;

        .line-chart,
        .table {
          @include pin-full;
        }
      }

      .manual-fallback {
        @include pin-full;
      }

      .drop-indicator {
        @include pin-full;
        z-index: 9;
      }
    }
  }

  .pinboard-panel {
    @include pin-right($pinboard-width);
    @include for-small-screens {
      margin-bottom: 0;
    }

    margin-bottom: $tile-margin-v - 1px;

    .pinboard-measure-tile,
    .dimension-tile,
    .placeholder-tile {
      &:first-child {
        border-radius: $corner $corner 0 0;
      }

      &:last-child {
        border-radius: 0 0 $corner $corner;
      }
    }
  }
}
